import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { LEVEL_COLOR, LEVEL_TEXT } from '@util/constants';
import moment from 'moment';
import _ from 'lodash';
import { Empty, Table } from 'antd';
import EmptyBgSvg from '@containers/asset-manage/components/asset-content/images/empty-bg.svg';
import VulDetail from '@components/oneday-detail-info';

const VulInfoTab = props => {
  const { currentDetail = {} } = props;

  const renderVulInfoExpandedRowRender = useCallback(record => {
    return <VulDetail data={record} />;
  }, []);

  const { onedayOids = [], vulOids = [] } = currentDetail;
  // 组装漏洞数据
  const vuls = vulOids.map(vul => {
    const newVul = _.clone(vul);
    const oneday = _.find(onedayOids, { _id: newVul.oneday_detail_oid });
    newVul.name = _.get(oneday, 'name', '-');
    newVul.level = _.get(oneday, 'level', '-');
    // eslint-disable-next-line
    newVul.onedayDetailOid = oneday;
    return newVul;
  });

  const columns = [
    {
      title: 'url',
      dataIndex: 'verifyInfo.URL',
      className: 'url-cell',
      render: url =>
        url ? (
          <a
            href={url}
            onClick={e => e.stopPropagation()}
            target="_blank"
            rel="noopener noreferrer"
          >
            {url}
          </a>
        ) : (
          '-'
        )
    },
    {
      title: 'name',
      className: 'name-cell',
      dataIndex: 'name',
      render: name => name || '-'
    },
    {
      title: 'level',
      dataIndex: 'level',
      className: 'level-cell',
      // eslint-disable-next-line react/display-name
      render: level => (
        <span className="level" style={{ color: LEVEL_COLOR[level] }}>
          {LEVEL_TEXT[level] || '-'}
        </span>
      )
    },
    {
      title: 'date',
      dataIndex: 'created',
      className: 'date-cell',
      render: date => (date ? moment(date).format('YYYY-MM-DD HH:mm:ss') : '-')
    }
  ];

  return _.isEmpty(vuls) ? (
    <Empty className="empty-extra" image={EmptyBgSvg} description="诶，好像什么都没有" />
  ) : (
    <Table
      _id="_id"
      className="vul-info"
      showHeader={false}
      columns={columns}
      pagination={false}
      scroll={{ x: true }}
      dataSource={vuls}
      expandedRowRender={renderVulInfoExpandedRowRender}
    />
  );
};

VulInfoTab.propTypes = {
  currentDetail: PropTypes.object.isRequired
};

export default VulInfoTab;
